<template>
  <div class="app">
    <div class="foot">
      <router-link
        class="link"
        :to="item.path"
        tag="div"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="footer" @click="back(index)">
          <img :src="item.back" />
          <span :style="{ color: item.color }">{{ item.name }}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          path: "/",
          back: require("../assets/homeimg/课程未选中.png"),
          color: "#9E9B9E",
          name: "课程",
        },
        {
          path: "/fuxi",
          back: require("../assets/homeimg/复习未选中.png"),
          color: "#9E9B9E",
          name: "复习",
        },
        {
          path: "/mine",
          back: require("../assets/homeimg/我的未选中.png"),
          color: "#9E9B9E",
          name: "我的",
        },
      ],
      List: [
        {
          back: require("../assets/homeimg/课程未选中.png"),
          color: "#9E9B9E",
          name: "课程",
        },
        {
          back: require("../assets/homeimg/复习未选中.png"),
          color: "#9E9B9E",
          name: "复习",
        },
        {
          back: require("../assets/homeimg/我的未选中.png"),
          color: "#9E9B9E",
          name: "我的",
        },
      ],
      Lists: [
        {
          back: require("../assets/homeimg/课程选中.png"),
          color: "#FFAF06",
          name: "课程",
        },
        {
          back: require("../assets/homeimg/复习选中.png"),
          color: "#FFAF06",
          name: "复习",
        },
        {
          back: require("../assets/homeimg/我的.png"),
          color: "#FFAF06",
          name: "我的",
        },
      ],
    };
  },
  methods: {
    back(i) {
      // console.log(i);
      this.list[0].back = this.List[0].back;
      this.list[1].back = this.List[1].back;
      this.list[2].back = this.List[2].back;
      this.list[0].color = this.List[0].color;
      this.list[1].color = this.List[1].color;
      this.list[2].color = this.List[2].color;
      this.list[i].back = this.Lists[i].back;
      this.list[i].color = this.Lists[i].color;
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
html {
  position: relative;
}

.foot {
  display: flex;
  justify-content: space-around;
  height: 2.6rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  // padding-top: 0.625rem;
  .link {
    width: 100%;
  }
  .footer {
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 0.75rem;
    img {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}
</style>
